<template>
  <div class="app-container calendar-list-container">
    <el-button
      class="filter-item"
      v-if="goodsManager_btn_add"
      style="margin-left: 10px;"
      type="primary"
      icon="edit"
      @click="handleCreate"
    >添加</el-button>
    <el-table
      :key="tableKey"
      :data="list"
      v-loading.body="listLoading"
      border
      fit
      highlight-current-row
      style="width: 99%;overflow: auto; margin-top: 10px;"
    >
      <el-table-column align="center" label="banner排序" min-width="10%">
        <template scope="scope">
          <span>{{scope.row.advertId}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="30%" align="center" label="跳转类型">
        <template scope="scope">
          <span v-if="scope.row.advertType==1">页面跳转</span>
          <span v-else-if="scope.row.advertType==2">商品详情</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="关联商品">
        <template scope="scope">
          <span>{{scope.row.goodsName}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="状态">
        <template scope="scope">
          <span v-if="scope.row.advertStatus==1">有效</span>
          <span v-else-if="scope.row.advertStatus==0">无效</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="20%">
        <template scope="scope">
          <el-button
            v-if="goodsManager_btn_edit"
            size="small"
            type="success"
            @click="handleUpdate(scope.row)"
          >编辑</el-button>
          <el-button
            v-if="goodsManager_btn_del"
            size="small"
            type="danger"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNo"
        :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import managementShops from "../managementShops";
import { mapGetters } from "vuex";
import { getToken } from "utils/auth";
import { bannerPage, bannerDelete } from "api/shop/shops/index";
import globalVariable from "@/utils/global";
export default {
  name: "bannerAdManage",
  components: {
    managementShops
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      listLoading: true,
      total: null,
      goodsManager_btn_add: false,
      goodsManager_btn_edit: false,
      goodsManager_btn_del: false,
      listQuery: {
        pageNo: 1,
        pageSize: 20,
        shopId: undefined
      }
    };
  },
  created() {
    this.listQuery.shopId = globalVariable.shopId;
    this.getBannerInfo();
    this.goodsManager_btn_add = this.elements["goodsManager:btn_add"];
    this.goodsManager_btn_edit = this.elements["goodsManager:btn_edit"];
    this.goodsManager_btn_del = this.elements["goodsManager:btn_del"];
  },
  computed: {
    ...mapGetters(["elements"])
  },
  methods: {
    getBannerInfo() {
      this.listLoading = true;
      bannerPage(this.listQuery).then(response => {
        this.list = response.data.rows;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getBannerInfo();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val;
      this.getBannerInfo();
    },
    handleCreate() {
      this.$router.push({
        path: "/shop/shops/addBanner",
        query: { id: globalVariable.shopId }
      });
    },
    handleUpdate(row) {
      this.$router.push({
        path: "/shop/shops/updateBanner",
        query: { id: row.advertId, shopId: globalVariable.shopId }
      });
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        bannerDelete(row.advertId).then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
          const index = this.list.indexOf(row);
          this.list.splice(index, 1);
          this.getBannerInfo();
        });
      });
    }
  }
};
</script>
<style>
</style>
